<template>
  <div>
    <van-row class="u-header">
      <van-col span="1" offset="1">
        <van-icon name="arrow-left" />
      </van-col>
      <van-col span="18">
        <span>我的留言</span>
      </van-col>
      <van-col span="4">
        <van-popover
          v-model="showPopover"
          trigger="click"
          :actions="actions"
          theme="dark"
          placement="bottom-end"
        >
          <template #reference>
            <van-icon name="ellipsis" />
          </template>
        </van-popover>
      </van-col>
    </van-row>
    <div :data="userData">
    <van-row class="u-body">
      <van-col span="2.5" offset="1" prop="utype"> </van-col>
      <van-col span="16" class="v-title" prop="usubject">
        <!-- <span >我的留言</span> -->
      </van-col>
      <van-col span="4.5" prop="time">  </van-col>
    </van-row>
    <van-row class="v-content">
      <van-col span="24" prop="ucontent">  </van-col>
    </van-row>
    </div>
    <van-row class="v-page">
      <van-col span="24">
        <van-pagination v-model="currentPage" :page-count="12" mode="simple" />
      </van-col>
    </van-row>
    <van-row>
      <van-col span="23" offset="1">
        <span class="v-type"> 留言类型</span>
      </van-col>
      <van-col span="24" class="v-span">
        <span> 留言</span>
        <span> 投诉</span>
        <span> 询问</span>
        <span> 售后</span>
        <span> 求购</span>
      </van-col>
    </van-row>
    <van-row>
      <van-col span="23" offset="1">
        <span class="v-type"> 留言主题</span>
      </van-col>
      <van-col span="24" class="v-span">
        <van-cell-group>
          <van-field v-model="value" class="v-inp" />
        </van-cell-group>
      </van-col>
    </van-row>
     <van-row>
      <van-col span="23" offset="1">
        <span class="v-type"> 留言内容</span>
      </van-col>
      <van-col span="24" class="v-span">
        <van-cell-group>
          <van-field type="textarea" v-model="value" class="v-inp" />
        </van-cell-group>
      </van-col>
    </van-row>
    <div style="margin: 16px;">
    <van-button round block type="info" native-type="submit" class="v-btn">提交留言</van-button>
  </div>
  <van-row class="v-to">
      <van-col span="19" offset="5">
        <span>剁手党的春天</span>
        <span>|</span>
        <span>门店查询</span>
      </van-col>
    </van-row>
     <van-row class="v-about">
      <van-col span="21" offset="3">
        <span>关于我们 <van-icon name="arrow" /></span>
        <span>购物指南 <van-icon name="arrow" /></span>
        <span>支付方式 <van-icon name="arrow" /></span>
        <span>售后服务 <van-icon name="arrow" /></span>
      </van-col>
    </van-row>
    <van-row class="v-bottom">
      <van-col span="22" offset="2">
        <div>&copy; 2019 XX公司&nbsp;&nbsp;ICP备XXXXXXXX号</div>
        <div>全国统一服务热线：400-888-8888</div>
        <div>技术支持：<a  style="color: #999;" href="http://www.jsdaima.com/" title="js代码" target="_blank">js代码（www.jsdaima.com）</a></div>
      </van-col>
    </van-row>
  </div>
</template>

<script>
import axios from "axios";
import {
  Icon,
  Col,
  Row,
  Popover,
  Button,
  Form,
  Field,
  Toast,
  Pagination,
   CellGroup 
} from "vant";
export default {
  data() {
    return {
      userData:[],
       value: '',
       currentPage: 1,
      showPopover: false,
      actions: [
        { text: "首页", icon: "wap-home-o" },
        { text: "分类", icon: "qr" },
        { text: "购物车", icon: "shopping-cart-o" },
        { text: "会员中心", icon: "friends-o" },
      ],
    };
  },
  //  created() {
  //   this.getData();
  // },
  //  async getData() {
  //     const result = await axios.get("/leaveword/list");
  //     this.userData = result.data;
  //   },
  components: {
    [Icon.name]: Icon,
    [Col.name]: Col,
    [Row.name]: Row,
    [Popover.name]: Popover,
    [Button.name]: Button,
    [Field.name]: Field,
    [Form.name]: Form,
    [Toast.name]: Toast,
    [Pagination.name]: Pagination,
    [CellGroup.name]: CellGroup 
  },
};
</script>

<style scoped>
.u-header {
  text-align: center;
  height: 3rem;
  color: black;
  line-height: 3rem;
  font-size: 1.1rem;
  background: #f5f5f5;
  border-bottom: 1px solid #dddddd;
  margin-bottom: 0.5rem;
}
.u-body {
  text-align: left;
  height: 2rem;
  color: black;
  line-height: 2rem;
  font-size: 0.5rem;
  background: #f5f5f5;
}
.v-title {
  color: skyblue;
  font-weight: bold;
}
.v-content {
  height: 5rem;
  border-bottom: 1px solid #dddddd;
  font-size: 0.5rem;
}
.v-page {
  height: 3rem;
  border-bottom: 0.3rem solid #dddddd;
  padding-top: 1rem;
}
.v-type {
  color: skyblue;
  display: inline-block;
  border-bottom: 0.2rem solid yellowgreen;
  padding-top: 1rem;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}
.v-span {
  font-size: 0.7rem;
}
.v-span > span {
  padding-left: 1rem;
}
.v-inp {
  border: 0.013333rem solid #dddddd;
  width: 90%;
  margin-left: 1rem;
  border-radius: 0.533333rem;
}
.v-btn{
    border-radius: .15rem;
     font-size: .8rem;
     display: block;
     padding: 1rem;
}
.v-to{
  /* background: green; */
  border-top: .6rem solid #dddddd;
  border-bottom: .1rem solid #dddddd;
  padding: .8rem;
  font-size: .8rem;
}
.v-to span{
  padding-left: .5rem;
  color: #B39999;
}
.v-about{
  font-size: .7rem;
    color: #B39999;
    /* background: green; */
    padding-top: 1rem;
}
.v-bottom{
  /* background: greenyellow; */
  font-size: .7rem;
    color: #B39999;
    padding-top: 1rem;
    text-align: center;
}
/* .v-bottom div{
  background: chocolate;
  margin-left: ;
} */
</style>